<template>
  <div class="login-page">
    <ElForm label-width="auto">
      <ElFormItem label="用户名">
        <ElInput v-model="user.username" placeholder=""></ElInput>
      </ElFormItem>
      <ElFormItem label="密码">
        <ElInput v-model="user.password" type="password"></ElInput>
      </ElFormItem>
      <ElButton type="primary" @click="login">login</ElButton>
    </ElForm>
  </div>
</template>
<script lang="ts">
import axios from '@/api/http'
import { ElMessage } from 'element-plus'
export default {
  name: 'LoginPage',
  props: {
    sampleP: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      sampleD: 'value',
      user: {
        username: 'wangwu',
        password: '333'
      }
    }
  },
  computed: {
    /* sampleC() {
      return this.sampleD + "--";
    }, */
  },
  created() {},
  mounted() {},
  methods: {
    // sampleM() {},
    async login() {
      // await async 中对于 请求非200 认为是一种错误 异常
      try {
        const res = await axios({
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          method: 'post',
          url:'http://localhost:8080/api/login',
          // url: 'http://localhost:8080/login',
          data: `username=${this.user.username}&password=${this.user.password}`
          // data: this.user
        })
        // console.log("token",res.data.data.token)
        localStorage.setItem("token",res.data.data.token)

        this.$router.push('/context')
      } catch (error: any) {
        // console.log(error)
        console.log(error.response.status)
        console.log(error.response.data)
        ElMessage.error(error.response.data)
      }
    }
  },
  watch: {
    // sampleP(n, o) {},
  }
}
</script>

<!--<style scoped>-->
<style lang="css" scoped>
.el-form {
  width: 300px;
  /* border: solid 1px saddlebrown; */
  margin-left: 500px;
}
.login-page {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
